'use client';

import { useState, useEffect } from 'react';
import { WeatherData } from '@/types/weather';
import { weatherService } from '@/services/weatherService';

export default function CurrentWeather() {
    const [weather, setWeather] = useState<WeatherData | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchWeather = async () => {
            try {
                // 使用默认坐标或获取用户位置
                const data = await weatherService.getCurrentWeather(39.9042, 116.4074);
                setWeather(data);
            } catch (error) {
                console.error('Error fetching weather:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchWeather();
    }, []);

    if (loading) {
        return <div className="animate-pulse">Loading...</div>;
    }

    if (!weather) {
        return <div>Failed to load weather data</div>;
    }

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
            <div className="text-center">
                <h2 className="text-6xl font-light text-gray-800">
                    {weather.temperature}°
                </h2>
                <p className="text-xl text-gray-600 mt-2">
                    {weather.description}
                </p>
            </div>

            <div className="grid grid-cols-2 gap-4 mt-6">
                <div className="flex items-center gap-2">
                    <span className="text-gray-500">湿度</span>
                    <span className="font-medium">{weather.humidity}%</span>
                </div>
                <div className="flex items-center gap-2">
                    <span className="text-gray-500">风速</span>
                    <span className="font-medium">{weather.windSpeed} m/s</span>
                </div>
            </div>
        </div>
    );
}